<template>
  <div class="flex-col">
    <el-tabs
      v-model="pagejson.pageType"
      class="demo-tabs"
      @tab-change="onTabClick">
      <el-tab-pane
        :label="item.label"
        :name="item.value"
        v-for="item in pagejson.tabslist"></el-tab-pane>
    </el-tabs>
    <pv-form
      class=""
      v-model="pagejson.queryForm"
      :option="pagejson.queryParams"
      @change="onTapChange"></pv-form>
    <itemList
      :datas="pagejson.listData"
      :pagejson="pagejson"
      :options="pagejson.listParams"
      @change="onTapItemChange"
      @load="getListData"></itemList>
    <pv-dialog
      v-model="pagejson.dialogJson.visible"
      :option="pagejson.dialogJson">
      <addForm :option="pagejson.fromData" @change="onDialogChange"></addForm>
    </pv-dialog>
  </div>
</template>

<script setup lang="ts" name="plugin">
import { queryParams, listParams, tabslist } from '@/scripts/plugin';
import addForm from './addForm.vue';
const pagejson: any = reactive({
  queryParams,
  listParams,
  tabslist,
  fromData: null,
  pageType: '',
  dialogJson: {
    visible: false,
    width: '50%',
    title: '新增',
    direction: 'center'
  },
  listData: [],
  queryForm: {},
  total: 0,
  size: 1,
  current: 10
});

const onTabClick = (val: string) => {
  pagejson.pageType = val;
  pagejson.listData = [];
  getListData();
};
const getListData = () => {
  const params = beforeAxiosEnter(queryParams, pagejson.queryForm);
  pagejson.pageType && (params.data.pluginType = pagejson.pageType);
  request(params).then(({ data }) => {
    pagejson.total = data.length;
    pagejson.listData = data;
  });
};
const onTapChange = ({ data, item }: any) => {
  if (item.text == '新增') {
    pagejson.dialogJson.visible = true;
    pagejson.fromData = {};
    pagejson.fromData.pluginType = pagejson.pageType;
  } else {
    pagejson.queryForm = Object.assign({}, data, {});
    getListData();
  }
};
const onTapItemChange = ({ item, data }: any) => {
  if (item.text == '编辑') {
    pagejson.fromData = data;
    pagejson.fromData.pluginType = pagejson.pageType;
    pagejson.dialogJson.visible = true;
  }
};
const onDialogChange = ({ data, item }: any) => {
  pagejson.dialogJson.visible = false;
  pagejson.pageType = '';
  if (item.load) {
    pagejson.listData = [];
    getListData();
  }
};
onBeforeMount(() => {
  pagejson.listData = [];
  getListData();
});
</script>
<style lang="scss" scoped>
.el-tabs :deep(.el-tabs__item) {
  color: var(--el-tabs-color);
  &.is-active {
    color: var(--el-color-primary);
  }
}
</style>
